<template>
    <div id="smarty-panel" v-if="vm">
        <div class="panel-main" v-if="false">
            <div class="header">
                <span>开发者：{{moduleinfo.md.author}}</span>
                <span class="close" @click="show=false"><Icon type="android-close"></Icon></span>
            </div>
            <div class="content">
                <div class="mds">
                    <span>当前模块：{{moduleinfo.md.alias.zh+'/'+moduleinfo.rd.alias.zh}}</span>
                </div>
                <div>
                    <Button @click="close('module')" type="primary" size="small">上传模块数据</Button>
                    <Button @click="close('children')" type="primary" size="small">上传路由数据</Button>
                </div>
            </div>
            <div class="footer">
                <input type="text" v-model="message" placeholder="输入内容" @keyup.enter="sendMsg">
            </div>
        </div>
        <div class="panel-icon" v-if="!show" @click="upload">
            <Icon type="social-nodejs" class="ico1" size="28"></Icon>
            <span class="ico2">{{upstatus}}</span>
        </div>
        <div class="panel-msgcox">
            <div v-for="item in allmsg" :key="item.key" :style="{right:item.right, top:item.top}">{{item.value}}</div>
        </div>
    </div>
</template>

<script>

import prolock from '~/utils/project'

export default {
    data() {
        return {
            show: false,
            vm: null,
            message: '',
            socket: null,
            localsocket: null,
            upstatus: '上传',
            allmsg: []
        }
    },
    methods: {
        close(type) {
            let data = { type, data: this.moduleinfo[type=='module'?'md':'rd'] }
            this.$http.post('api/management/v1/mongo/module/edit', data).then(res=> {
                console.log(res)
            })
        },
        upload() {
            this.upstatus = '上传中'
            this.$http.post('api/management/v1/mongo/module/edit', {
                data: this.moduleinfo.md
            }).then(res=> {
                this.upstatus = '成功'
                this.clearst()
            }).catch(err=> {
                this.upstatus = '失败'
                this.clearst()
            })
        },
        clearst() {
            setTimeout(()=> {
                this.upstatus = '上传'
            },1000)
        },
        sendMsg() {
            if(!this.message) return;
            this.socket.emit('send-msg',this.message)
            this.message = ''
        },
        credom(msg) {
            let key = Math.ceil(Math.random()*99999)
            let top = Math.ceil(Math.random()*600)
            this.allmsg.push({ key,
                value: msg, right:0, top
            })
            setTimeout(()=> {
                this.allmsg.find(item=> item.key==key).right = document.body.clientWidth+100+'px'
            },100)
            setTimeout(()=> {
                this.allmsg.splice(this.allmsg.findIndex(item=> item.key==key),1)
            },15000)
        }
    },
    computed: {
        moduleinfo() {
            let conf = this.vm.$route.path.split('/').splice(1)
            let md = this.vm.$modules.find(item=> item.path==conf[0])
            let rd = null
            if(md.path!='home') {
                rd = md.children.find(item=> item.path==conf[1])
            }
            return { md, rd }
        }
    },
    directives: {
        drag: (el, binding)=> {
            let self = this
            el.onmousedown = function (e) {
                //鼠标按下，计算当前元素距离可视区的距离
                let disX = e.clientX - el.offsetLeft;
                let disY = e.clientY - el.offsetTop;

                document.onmousemove = function (e) {
                    //通过事件委托，计算移动的距离 
                    let l = e.clientX - disX;
                    let t = e.clientY - disY;
                    //移动当前元素  
                    el.style.left = l + 'px';
                    el.style.top = t + 'px';
                }
                document.onmouseup = function (e) {
                    document.onmousemove = null;
                    document.onmouseup = null;
                }
            }
        }
    },
    mounted() {
        setTimeout(()=> {
            this.vm = Vm
        },1000)
    }
}
</script>

<style lang="less">
#smarty-panel {
    position: fixed;
    top: 70px; right: 20px;
    z-index: 1000;
    .panel-main {
        width: 360px; height: 550px;
        border-radius: 5px;
        box-shadow: 2px 6px 20px 2px #f5f5f5;
        background: #fff;
        position: relative;
        .header {
            font-size: 16px;
            height: 45px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 13px;
            border-bottom: 1px solid #f5f5f5;
            .close {
                font-size: 18px;
                cursor: pointer;
            }
        }
        .content {
            .mds {
                padding: 5px 8px;
                font-size: 14px;
            }
        }
        .footer {
            position: absolute;
            bottom: 0; left: 0; right: 0;
            border-top: 1px solid #f5f5f5;
            input {
                display: block;
                width: 94%;
                height: 35px;
                font-size: 14px;
                margin-left: 3%;
                border: none;
                color: #666;
            }
        }
    }
    .panel-icon {
        width: 50px; height: 50px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        background: #1890ff;
        box-shadow: 1px 2px 10px 3px #e6f7ff;
        position: relative;
        cursor: pointer;
        .ico2 {
            display: none;
        }
        &:hover {
            .ico1 {
                display: none;
            }
            .ico2 {
                display: block;
            }
        }
    }
    .panel-msgcox {
        position: fixed; top:0; 
        white-space:nowrap;
        width: 100px;
        right: -100px;
        div {
            position: relative;
            transition: right 12s linear;
            font-size: 16px;
            color: #8A2BE2;
            font-weight: bold;
        }
    }
}
</style>
